ui|datacollectorset,
ui|datacollector {
    position: absolute;
    visibility: hidden;
}

ui|fields {
    display: none; /* adjusted by FieldsBinding.js */
    position: relative; /* mostly because it fixes an ie bug where fieldgroup captions would hang on tabpanel changes */
}

ui|fieldgroup {
    width: 100%;
    display: block;
    padding: 0px 0px 30px 0px;

    .fieldgrouplabel {
        color: @heading-h1-color;
        text-transform: uppercase;
        font-style: italic;
        font-size: 14px;
        font-family: @heading-font-family;
        margin-top: 0px;
        margin-bottom: 18px;

        ui|labeltext {
            padding-right: 5px;
        }

        ui|labelbody {
            float: left;
        }
    }

    &:last-child {
        padding-bottom: 0;
    }
}

ui|fielddesc {
    display: block;
    padding: 8px 0 5px 5px;
    white-space: normal;
    .user-select(none);
    color: @field-label-color;
}

ui|field {
    display: block;
    margin: 0;
    clear: both;
    padding: 0;

    &.fieldhelp {
        ui|fielddata {
            margin-right: 30px;

            input, select, textarea, ui|simpleselector select {
                width: 100%;
            }
        }
    }

    &.nodesc ui|fielddata {
        width: auto;
        float: none;
    }
}

ui|editorpage {

    ui|fields {
        -webkit-column-width: 430px; /* Chrome, Safari, Opera */
        -moz-column-width: 430px; /* Firefox */
        column-width: 430px;
    }

    ui|fieldgroup {
        width: 430px;
        display: table;
        overflow: visible;
        position: relative;
        -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
        page-break-inside: avoid; /* Firefox */
        break-inside: avoid; /* IE 10+ */

        @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
           display: inline-block; 
        }  /* IE 10, 11 */
    }
}


    ui|fieldgroup.boxed, ui|editorpage ui|fieldgroup {

        ui|field {
            border: solid 1px @fields-group-border-color;
            border-width: 0 1px;
            background: @fields-group-bg-color;
            padding: 0 17px;

            &.first {
                padding-top: 8px;
                border-top-width: 1px;
                border-top-left-radius: @base-border-radius;
                border-top-right-radius: @base-border-radius;
            }

            &.last, &:last-of-type {
                padding-bottom: 25px;
                border-bottom-width: 1px;
                border-bottom-left-radius: @base-border-radius;
                border-bottom-right-radius: @base-border-radius;
            }
        }
    }

ui|fieldhelp {
    overflow: visible;
    float: right;
    position: relative;

    ui|clickbutton.fieldhelp {

        ui|labelbox {
            border-color: transparent;
            background: transparent !important;
        }

        &:after {
            content: "?";
            width: 16px;
            height: 16px;
            color: white;
            position: absolute;
            top: 4px;
            left: 4px;
            background: #CDCDCF;
            border-radius: 8px;
            font-size: 11px;
            text-align: center;
            line-height: 16px;
            font-weight: normal;
            font-family: Verdana;
        }

        &.active, &.hover {
            &:after {
                background: #808080;
            }
        }
    }
}

ui|clickbutton {
    &.fieldhelp { /* width and height needed for explorer vanishing dysfunction */
        margin: 0;
        top: 2px;
        right: 2px;
        position: absolute;
        width: 20px;
        height: 26px;

        ui|labelbox {
            padding: 0;
        }
    }
}

ui|fieldsbutton ui|clickbutton {
    float: none;
    margin: 2px 0 10px 0;

    ui|labelbox {
        border-color: @field-border-color;
        color: @text-color;
    }
}

.options-filedgroup { // usage: FunctionCallEditor - Advanced View
    ui|clickbutton {

        ui|labelbox {
            padding-left: 28px;
        }
    }

    .isdisabled, .selected {
        opacity: 0.75 !important;

        &:after {
            content: "\2713";
            font-size: 16px;
            font-weight: bold;
            position: absolute;
            top: 4px;
            left: 10px;
            color: @primary-color;
        }
    }
}

ui|popup.fieldhelppopup {
    min-width: 220px;
}

ui|fielddata {
    display: block;
    position: relative; /* because of strange fieldhelp setup for exploder */
    input, select, textarea {
        width: 100%;
        padding: 0;
        margin: 0;
        border: none;
        display: block;
    }

    input, textarea {
        &.warning {
            font-weight: bold;
            color: @field-error-color;
        }
    }

    .disabled, .readonly {
        input, textarea {
            cursor: default;
            background-color: @field-readonly-bg-color;
        }
    }

    .disabled {

        input, textarea {
            .user-select(none);
            -moz-user-focus: none;
            user-focus: none;
        }
    }

    input {
        padding: 5px 0 0 7px;
    }
}

ui|datainput {
    display: block;
}

ui|datainput,
ui|datainputselector,
ui|datainputdialog,
ui|datainputbutton,
ui|urlinputdialog,
ui|textbox,
ui|selector,
ui|simpleselector,
ui|multiselector,
ui|datadialog,
ui|postbackdialog,
ui|htmldatadialog,
ui|editortextbox {
    padding: 2px;

    input {
        border: none;
    }

    ui|box {
        border: 1px solid @field-border-color;
        border-radius: @field-border-radius;
        background-color: @field-bg-color;
        height: 32px;
        overflow: hidden;
    }

    &.disabled, &.readonly {

        ui|box, ui|box input, ui|toolbarbutton {
            background-color: @field-readonly-bg-color;
        }
    }

    &.invalid {
        ui|box {
            border-color: @field-error-color;
        }

        ui|labeltext {
            font-weight: bold;
            border-color: @field-error-color;
        }
    }
}


/* EXOTIC STUFF ................................... */

ui|nullpostbackdatadialog {
    display: block;
}


ui|datalabeltext {
    display: block;
    float: left;
    padding-left: 5px;
    padding-top: 2px;
    .user-select(none); /* See notes in DocumentManager.js */
}



/* TOOLBARS ........................................................... */

ui|toolbar ui|field {
    margin: 0;
    float: left;
}

ui|toolbar ui|fielddesc,
ui|toolbar ui|fielddata {
    float: left;
    width: auto;
}

    ui|toolbar ui|fielddata input,
    ui|toolbar ui|fielddata select {
        width: 100px;
    }

ui|fields ui|datadialog ui|clickbutton ui|labeltext,
ui|fields ui|postbackdialog ui|clickbutton ui|labeltext,
ui|fields ui|htmldatadialog ui|clickbutton ui|labeltext,
ui|fields ui|datainputdialog ui|clickbutton ui|labeltext,
ui|fields ui|datainputbutton ui|clickbutton ui|labeltext,
ui|fields ui|urlinputdialog ui|clickbutton ui|labeltext,
ui|fields ui|selector ui|clickbutton ui|labeltext {
    overflow: hidden;
    text-overflow: ellipsis;
}
